Hey There, welcome to another blog post. This time we’re going to be we’re going to be talking about CSS.
CSS (Cascading Style Sheets) is a language used to style and format web pages. It is used alongside HTML, which provides the page's structure and content, to control how elements are displayed on the screen.
If HTML is the "bones" and structure of a webpage , CSS is the style, aesthetics, and layout applied to that structure. In short, HTML is the content; CSS is the presentation. A page without CSS is just raw, unappealing text and links.
Let’s break it down even further
C – Cascading
S – Style
S – Sheets
Cascading
The term “cascading” refers to the specific priority scheme for applying styles.
The “cascading” principle is a set of rules the browser uses to decide which style takes priority and is applied. On a single webpage, it’s possible to have multiple CSS rules that target the exact same HTML element, but the cascading principle is what the browser uses to decide which of the styles to apply.
Style
In the context of CSS, Style refers to the visual appearance, aesthetics, and layout of the content on a web page. This is where you determine what an element looks like. Do you want your paragraph text to be black, or blue? Do you want a heading to be 20 pixels in size? These are style attributes.
Unlike HTML, which uses markup tags to define structure , CSS uses a rule-based syntax to apply these specific styles to HTML elements. A CSS rule is made up of three main parts:
- Selector: This is what targets the specified HTML element you want to style. For example, if you want to style a paragraph, you’ll use *p* and if you want to style a heading, you’ll use between h1 and h6, depending on the type of heading you’re styling.
- Property: This is a specific style attribute that you want to change. For example, By default the text on a webpage is black, if you want to change it to another color, you’ll change the color property or you want to increase the size of the text, you adjust the font-size property.
- Value: This is the setting you want to assign to the property. Like stated above, you want to change the color of an element, you change the value of color property or you want the size of the text to be bigger, you change the value of the font-size property. For example, you want the color of an element to be blue, you change the color property to blue and if you want the text to be bigger, you set the font-size property to 20px.
N.B: “px” stands for pixels, which is the standard unit for measurement in CSS. Normally, you use centimeters or meters to measure things but CSS has it’s own unit of measurement
N.B: The Property and Value make up the Declaration, which is enclosed in curly braces *{}*.
A simple CSS rule look like this:
h1 {
color: blue;
font-size: 20px;
}
This targets all h1 elements and changes the value of their color and font-size property to blue and 20px respectively.
Sheets
Sheets simply refers to where the style definitions are written. These sheets are typically separate text files that end with the .css file extension, instead of the .txt file extension, keeping the style information cleanly separate from the HTML structure.
Conclusion:
In summary, CSS (Cascading Style Sheets) is the language that takes the bare structural framework provided by HTML and turns it into an organized, appealing webpage. It is the style and presentation layer, using a rule-based system of selectors and declarations to tell the browser how to visually display the content.
Once you have the structure with HTML and the style with CSS, you're ready to add action and logic using JavaScript.
Thank you for reading and have a wonderful rest of your day.